<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #app {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 800px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        img {
            height: 100px;
            width: 100px;
            object-fit: cover;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }
        .form-group label {
            margin-bottom: 5px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>商品管理</h2>
        <table>
            <thead>
                <tr>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品图片</th>
                    <th>商品库存</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, i) in items">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td><img v-bind:src="item.imgSrc" /></td>
                    <td>{{ item.num }}</td>
                    <td><button @click="del(i)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div class="form-group">
            <label for="name">商品名称:</label>
            <input type="text" id="name" v-model="name" />
        </div>
        <div class="form-group">
            <label for="price">商品价格:</label>
            <input type="text" id="price" v-model="price" />
        </div>
        <div class="form-group">
            <label for="imgSrc">图片地址:</label>
            <input type="text" id="imgSrc" v-model="imgSrc" />
        </div>
        <div class="form-group">
            <label for="num">商品库存:</label>
            <input type="text" id="num" v-model="num" />
        </div>
        <button @click="add">添加</button>
    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    name: '',
                    price: '',
                    imgSrc: '',
                    num: '',
                    items: [
                        {
                            id: 1,
                            name: "iPhone 14",
                            price: 8888,
                            imgSrc: "./img/iphone14.jpg",
                            num: 3
                        },
                        {
                            id: 2,
                            name: "华为Mate40",
                            price: 8888,
                            imgSrc: "./img/mate40.jpg",
                            num: 3
                        }
                    ]
                }
            },
            methods: {
                add() {
                    this.items.push({
                        id: this.items.length + 1,
                        name: this.name,
                        price: this.price,
                        imgSrc: this.imgSrc,
                        num: this.num
                    });
                    this.name = '';
                    this.price = '';
                    this.imgSrc = '';
                    this.num = '';
                },
                del(i) {
                    this.items.splice(i, 1);
                }
            }
        }).mount("#app");
    </script>
</body>
</html>